<template>
  <!-- 底部 -->
  <div class="docker">
    <span class="docker__item" @click="jump('Home')">
      <div class="iconfont">&#xe867;</div>
      <div class="docker__title">首页</div>
    </span>
    <span class="docker__item" @click="jump('Detail')">
      <div class="iconfont">&#xe603;</div>
      <div class="docker__title">购物车</div>
    </span><span class="docker__item" @click="jump('order')">
      <div class="iconfont">&#xe7b3;</div>
      <div class="docker__title">订单</div>
    </span><span class="docker__item" @click="jump('my')">
      <div class="iconfont">&#xe78b;</div>
      <div class="docker__title">我的</div>
    </span>
  </div>
</template>

<script>
export default {
  name: "tab-bar",
  methods: {
    jump(address){
      this.$router.push({
        name:address
      }).catch(err => {  console.log('输出报错',err)})
    }
  },
};
</script>

<style lang="scss" scoped>
.docker {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  height: 0.49rem;
  width: 100%;
  //background-color: skyblue;
  border-top: .01rem solid #f1f1f1;

  &__item {
    flex: 1;
    text-align: center;
    .iconfont {
      margin: 0.07rem 0 0.02rem 0;
      font-size: 0.18rem;
    }
    .docker__title {
      font-size: 0.1rem;
      //transform: scale(.5 .5);
      transform-origin: center top;
    }
    &:hover {
      color: #1fa4fc;
    }
  }
}
</style>